<template>
    <div class="page-view">
        <div class="div-page">
            <div class="btn-box">
                <div class="download-btn" @click="downloadFileRename(ossFileName, fileName)">{{ !loadingDownLoad?'立即下载':'下载中...' }}</div>
                <div class="download-hint-btn">支持<img class="icon" src="../assets/pc/image.png" />Win7-11</div>
            </div>
        </div>
        <div class="right-bottom-box">
            <div class="top-option" @click="topClick">
                <img src="@/assets/pc/topIcon.jpg" class="top-icon" />
            </div>
            <div class="message-option" @click="messageClick">
                <img src="@/assets/pc/messageIcon.png" class="message-icon" />
                <div class="message-txt">在线客服</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Head',
    data() {
        return {
            ossFileName: '',
            version: '',
            fileName: '',
            loadingDownLoad:false,
        }
    },
    mounted() {
    },
    methods: {
        initData(ossFileName, fileName, version) {
            this.ossFileName = ossFileName
            this.fileName = `${fileName}V${version}.exe`
        },
        downloadFileRename(url, filename) {
            if(this.loadingDownLoad){
                return
            }
            let that = this
            that.loadingDownLoad=true

            console.log(url)
            console.log(filename)
            function getBlob(url) {
                return new Promise((resolve) => {
                    const xhr = new XMLHttpRequest()
                    xhr.open("GET", url, true)
                    xhr.responseType = "blob"
                    xhr.onload = () => {
                        if (xhr.status === 200) {
                            that.loadingDownLoad=false
                            resolve(xhr.response)
                        }
                    }
                    xhr.send()
                })
            }
            function saveAs(blob, filename) {
                if (window.navigator.msSaveOrOpenBlob) {
                    navigator.msSaveBlob(blob, filename)
                } else {
                    const link = document.createElement("a")
                    const body = document.querySelector("body")

                    link.href = window.URL.createObjectURL(blob)
                    link.download = filename

                    // fix Firefox
                    link.style.display = "none"
                    body.appendChild(link)

                    link.click()
                    body.removeChild(link)

                    window.URL.revokeObjectURL(link.href)
                    return
                }
            }
            getBlob(url).then((blob) => {
                saveAs(blob, filename)
            })
        },
        // async openUrl() {
        //     if (!this.ossFileName) {
        //         return
        //     }
        //     // const link = document.createElement('a');
        //     // console.log("link===",link)
        //     // link.href = this.ossFileName;
        //     // link.download= '123';
        //     // // link.target = '_blank';
        //     // link.rel = 'noopener noreferrer'; // 安全建议
        //     // link.click();
        //     // return
        //     try {
        //         // 发起请求获取文件
        //         const response = await fetch(this.ossFileName);

        //         if (!response.ok) {
        //             throw new Error(`下载失败:`);
        //         }
        //         // 获取文件内容
        //         const blob = await response.blob();
        //         // 创建下载链接
        //         const url = window.URL.createObjectURL(blob);
        //         const a = document.createElement('a');
        //         a.href = url;
        //         a.download = '123'
        //         document.body.appendChild(a);
        //         // 触发下载
        //         a.click();
        //         // 清理
        //         setTimeout(() => {
        //             document.body.removeChild(a);
        //             window.URL.revokeObjectURL(url);
        //         }, 100);

        //     } catch (error) {
        //         console.error('下载出错:', error);
        //     } finally {
        //     }

        // },
        topClick() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth' // 平滑滚动
            });
        },
        messageClick() {
            window.scrollTo({
                top: document.documentElement.scrollHeight,
                behavior: 'smooth' // 平滑滚动
            });
        }

    }
}
</script>
<style scoped="scoped" lang="scss">
.page-view {
    position: relative;

    .right-bottom-box {
        position: fixed;
        bottom: 50vh;
        right: 11vw;
        z-index: 111;

        .top-option {
            width: 62px;
            height: 50px;
            opacity: 1;
            background: rgba(255, 255, 255, 1);
            display: flex;
            align-items: center;
            justify-content: center;

            .top-icon {
                width: 23px;
                height: 25px;
            }
        }

        .message-option {
            background: rgba(255, 255, 255, 1);
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            margin-top: 2px;
            width: 62px;
            height: 74px;

            .message-icon {
                width: 35px;
                height: 35px;
            }

            .message-txt {
                margin-top: 9px;
                color: rgba(0, 0, 0, 1);
                font-size: 12px;
                font-weight: 400;
            }

        }
    }
}

.div-page {
    width: 100%;
    height: 80vh;
    cursor: pointer;
    background-image: url('~@/assets/pc/banner1.png');
    background-repeat: no-repeat;
    background-size: 100% 80vh;
    position: relative;

    .btn-box {
        position: absolute;
        left: 11vw;
        bottom: 36vh;

        .download-btn {
            width: 12vw;
            height: 5vh;
            line-height: 5vh;
            text-align: center;
            color: #fff;
            font-size: 24px;
            background: rgba(14, 139, 235, 1);
        }

        .download-hint-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 5vh;
            line-height: 5vh;

            .icon {
                width: 18px;
                height: 17px;
            }

            font-size: 16px;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
            background: rgba(37, 158, 250, 0.05);
        }
    }
}


img {
    padding: 0;
    margin: 0;
}

@media screen and (max-width: 991px) {
    .div-page {
        width: 100%;
        height: 40vh;
        cursor: pointer;
        background-image: url('~@/assets/pc/banner1.png');
        background-repeat: no-repeat;
        background-size: 100% 40vh;
        position: relative;
        height: 40vh;
    }

    .btn-box {
        position: absolute;
        left: 11vw;
        bottom: 16vh !important;

        .download-btn {
            width: 150px !important;
            height: 36px !important;
            line-height: 36px !important;
            text-align: center;
            color: #fff !important;
            font-size: 18px !important;
            background: rgba(14, 139, 235, 1);
        }

        .download-hint-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 150px !important;
            height: 36px !important;
            line-height: 36px !important;

            .icon {
                width: 12px !important;
                height: 12px !important;
            }

            font-size: 14px !important;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
            background: rgba(37, 158, 250, 0.05);
        }
    }

    .page-view {
        position: relative;

        .right-bottom-box {
            position: fixed;

            bottom: 50vh;

            right: 11vw;
            z-index: 111;

            .top-option {
                width: 52px;
                height: 40px;
                opacity: 1;
                background: rgba(255, 255, 255, 1);
                display: flex;
                align-items: center;
                justify-content: center;

                .top-icon {
                    width: 17px;
                    height: 19px;
                }
            }

            .message-option {
                background: rgba(255, 255, 255, 1);
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                margin-top: 2px;
                width: 52px;
                height: 64px;

                .message-icon {
                    width: 25px;
                    height: 25px;
                }

                .message-txt {
                    margin-top: 9px;
                    color: rgba(0, 0, 0, 1);
                    font-size: 10px;
                    font-weight: 400;
                }

            }
        }
    }
}

@media screen and (max-width: 767px) {
    .div-page {
        width: 100%;
        height: 32vh;
        cursor: pointer;
        background-image: url('~@/assets/pc/banner1.png');
        background-repeat: no-repeat;
        background-size: 100% 32vh;
        position: relative;
        height: 32vh;
    }

    .btn-box {
        position: absolute;
        left: 11vw;
        bottom: 13vh !important;

        .download-btn {
            width: 150px !important;
            height: 32px !important;
            line-height: 32px !important;
            text-align: center;
            color: #fff !important;
            font-size: 16px !important;
            background: rgba(14, 139, 235, 1);
        }

        .download-hint-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 150px !important;
            height: 32px !important;
            line-height: 32px !important;

            .icon {
                width: 12px !important;
                height: 12px !important;
            }

            font-size: 12px !important;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
            background: rgba(37, 158, 250, 0.05);
        }
    }

    .page-view {
        position: relative;

        .right-bottom-box {
            position: fixed;

            bottom: 50vh;
            right: 11vw;
            z-index: 111;

            .top-option {
                width: 52px;
                height: 40px;
                opacity: 1;
                background: rgba(255, 255, 255, 1);
                display: flex;
                align-items: center;
                justify-content: center;

                .top-icon {
                    width: 17px;
                    height: 19px;
                }
            }

            .message-option {
                background: rgba(255, 255, 255, 1);
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                margin-top: 2px;
                width: 52px;
                height: 54px;

                .message-icon {
                    width: 20px;
                    height: 20px;
                }

                .message-txt {
                    margin-top: 9px;
                    color: rgba(0, 0, 0, 1);
                    font-size: 10px;
                    font-weight: 400;
                }

            }
        }
    }
}

@media screen and (max-width: 480px) {
    .div-page {
        width: 100%;
        cursor: pointer;
        background-image: url('~@/assets/pc/banner1.png');
        background-repeat: no-repeat;
        background-size: 100% 22vh;
        position: relative;
        height: 22vh;
    }

    .btn-box {
        position: absolute;
        left: 11vw;
        bottom: 50vh !important;

        .download-btn {
            width: 70px !important;
            height: 20px !important;
            line-height: 20px !important;
            text-align: center;
            color: #fff !important;
            font-size: 10px !important;
            background: rgba(14, 139, 235, 1);
        }

        .download-hint-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 70px !important;
            height: 20px !important;
            line-height: 20px !important;

            .icon {
                width: 6px !important;
                height: 6px !important;
            }

            font-size: 8px !important;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
            background: rgba(37, 158, 250, 0.05);
        }
    }

    .page-view {
        position: relative;

        .right-bottom-box {
            position: fixed;

            bottom: 50vh;
            right: 11.5%;
            z-index: 111;

            .top-option {
                width: 42px;
                height: 30px;
                opacity: 1;
                background: rgba(255, 255, 255, 1);
                display: flex;
                align-items: center;
                justify-content: center;

                .top-icon {
                    width: 17px;
                    height: 19px;
                }
            }

            .message-option {
                background: rgba(255, 255, 255, 1);
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                margin-top: 2px;
                width: 42px;
                height: 44px;

                .message-icon {
                    width: 18px;
                    height: 18px;
                }

                .message-txt {
                    margin-top: 3px;
                    color: rgba(0, 0, 0, 1);
                    font-size: 8px;
                    font-weight: 400;
                }

            }
        }
    }
}
</style>
